<template>
  <div class="app-container">
    <!-- 拓展服务 -->
    <div class='search-bar'>
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <span>版本号：</span>
        <el-input style="width:2.2rem" v-model="searchModel.userName" placeholder=""></el-input>
        <span class='move-right'>系统名称：</span>
        <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.systemName" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in systemNameTypes" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <span class='move-right'>启用状态：</span>
        <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.selectType" placeholder="" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="move-right" type="primary" @click="handleSearch">查询
        </el-button>
        <el-button style="margin-left:20px" @click="handleResetting">重置
        </el-button>
      </el-form>
      <el-button style="margin-top:20px;" @click="handleDownload">新增
      </el-button>
      <el-table style="margin-top:20px;" v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
        highlight-current-row max-height="500">
        <el-table-column align='center' label='序号' width='80'>
          <template slot-scope='scope'>
            {{ scope.$index + 1 + pageSize * (currentPage - 1) }}
          </template>
        </el-table-column>
        <el-table-column label='系统名称' width='120' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label='版本号' width='200' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.versionName }}</span>
          </template>
        </el-table-column>
        <el-table-column label='版本描述' width='200' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='启用状态' width='110' align='center'>
          <template slot-scope='scope'>
            <el-tag>{{ scope.row.enabledMark ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label='创建人' width='150' align='center'>
          <template slot-scope='scope'>
            {{ scope.row.creationName }}
          </template>
        </el-table-column>
        <el-table-column label='创建时间' width='160' align='center'>
          <template slot-scope='scope'>
            {{ scope.row.creationTime }}
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at2' label='操作' width='240'>
          <template slot-scope='scope'>
            <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
            <!-- <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="prev, pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="新增版本" :visible.sync="dialogFormVisible" width="30%">
        <el-form :label-width="labelWidth" :model="inputModel" :rules="rules">
          <el-form-item label="系统名称:" prop="systemName">
            <el-select v-model="inputModel.systemName" style="width: 405px" @change="$forceUpdate()">
              <el-option v-for="item in systemNameTypes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本号:" prop="editionName">
            <el-input class="input-width" v-model="inputModel.editionName"></el-input>
          </el-form-item>
          <el-form-item label="版本说明:" prop="description">
            <el-input class="input-width" v-model="inputModel.description"></el-input>
          </el-form-item>
          <el-form-item label="上传安装包:" prop="uploadInput">
            <el-row>
              <el-col :span="12">
                <el-input style="width: 290px" readonly v-model="inputModel.upload"></el-input>
              </el-col>
              <el-col :span="12">
                <el-upload style="margin-left: 85px;" ref="upload" :action="action + `/api/file-management/files/upload`"
                  :file-list="fileList" :show-file-list="actionShow" :on-success="uploadOnSuccess"
                  :before-upload="beforeUpload" accept=".zip" :headers="headers">
                  <el-button>点击上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="启用状态:" prop="radio">
            <el-radio v-model="inputModel.radio" label="1">启用</el-radio>
            <el-radio v-model="inputModel.radio" label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="SubmitEvent">提交</el-button>
          <el-button style="margin-top:1rem;" @click="initInputData">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
   
<script>

import { getEditionList, getIdEditionData, insertEditionEd, updateEditionEd } from '@/api/edition'
import { parseTime } from '@/utils'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      actionShow: true,
      action: process.env.VUE_APP_FILE_API,
      listLoading: false,
      headers: {
        Authorization: 'bearer ' + getToken(),
      },
      //获取输入的查询条件
      searchModel: {
        userName: '',
        selectType: '',
        systemName: '',
      },
      //获取新增的信息
      inputModel: {
        systemName: '',
        editionName: '',
        description: '',
        upload: '',
        radio: '1',
      },
      editId: "",
      //控制弹出层
      dialogFormVisible: false,
      labelWidth: "110px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      systemNameTypes: [
        {
          value: 0,
          label: '请选择'
        }, {
          value: 1,
          label: '门禁中控客户端'
        }, {
          value: 2,
          label: '岗亭客户端'
        }, {
          value: 3,
          label: '监听客户'
        }, {
          value: 4,
          label: '地磅端'
        },
      ],
      //状态
      types: [
        {
          value: -1,
          label: '请选择'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 0,
          label: '禁用'
        },
      ],
      fileList: [],
      rules: {
        systemName: [{ required: true, message: '请选择系统名称', trigger: 'blur' }],
        editionName: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
        description: [{ required: true, message: '请输入版本说明', trigger: 'blur' }],
        uploadInput: [{ required: true, message: '请上传安装包', trigger: 'blur' }],
      },
      list: [],
    }
  },
  created() {
    this.getEditionList();
    console.log(this.action)
  },
  methods: {
    handleResetting() {
      this.searchModel = {
        userName: '',
        selectType: '',
        systemName: '',
      }
    },
    initInputData() {
      this.inputModel = {
        systemName: '',
        editionName: '',
        description: '',
        upload: '',
        radio: '1',
      }
      this.editId = "";
      this.dialogFormVisible = false;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    uploadOnSuccess(res, file, fileList) {
      this.inputModel.upload = '/' + file.name
      this.actionShow = false;
    },
    // handleDelete(){

    // },

    handleSearch() {
      this.currentPage = 1;
      this.getEditionList();
    },
    handleEdit(index, row) {
      this.initInputData();
      this.editId = row.id;
      getIdEditionData(this.editId).then(res => {
        console.log(res);
        this.dialogFormVisible = true;
        this.inputModel.systemName = res.programType;
        this.inputModel.editionName = res.versionName;
        this.inputModel.upload = res.url;
        this.inputModel.radio = String(res.enabledMark);
        this.inputModel.description = res.content;
      })
    },
    beforeUpload(file) {
      const fileFamart = file.name.split('.')[file.name.split('.').length - 1];
      if (fileFamart !== 'zip') {
        this.$message.warning('必须上传zip格式的文件!')
      }
      return fileFamart === 'zip'
    },
    getEditionList() {
      let data = {
        VersionName: this.searchModel.userName,
        SkipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize,
      }
      if (Number(this.searchModel.systemName) != 0) {
        data.ProgramType = Number(this.searchModel.systemName);
      }

      if (Number(this.searchModel.selectType) != -1 || this.searchModel.selectType != true) {
        this.EnabledMark = this.searchModel.selectType;
      }

      getEditionList(data).then(res => {
        this.list = res.items;
        this.total = res.totalCount;
        this.list.forEach(item => {
          item.creationTime = parseTime(new Date(item.creationTime));
        });
      })
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.getEditionList();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getEditionList();
    },
    handleDownload() {
      this.initInputData();
      this.dialogFormVisible = true;
    },
    SubmitEvent() {
      let data = {
        version: Number(this.inputModel.editionName.split('.')[0]),
        versionName: this.inputModel.editionName,
        url: this.inputModel.upload,
        isUpdate: 0,
        enabledMark: this.inputModel.radio == "1" ? 1 : 0,
        creationName: "",
        content:this.inputModel.description,
      }
      this.systemNameTypes.forEach(item => {
        if (item.value == this.inputModel.systemName) {
          data.name = item.label;
          data.programType = item.value;
        }
      });
      if (!this.editId) {
        insertEditionEd(data).then(res => {
          if (!res.error) {
            this.$message.success("添加成功");
            this.initInputData();
            this.getEditionList();
          }
        });
      } else {
        data.id = this.editId;
        updateEditionEd(data).then(res => {
          if (!res.error) {
            this.$message.success("修改成功");
            this.initInputData();
            this.getEditionList();
          }
        });
      }
    }
  }
}
</script>
   
<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  float: left;
  margin-left: 10%;
  margin-top: .9rem;
}

.block {
  margin-right: .2rem;
  float: right;
}

.input-width {
  width: 404px;
}

.move-right {
  margin-left: .5rem;
}
</style>
   